<template>
  <div v-title="'结算中心 - 世外票务云平台'">
    <mk-breadcrumb :is-return="false" :breadcrumb-data="breadcrumbData"></mk-breadcrumb>
    <el-scrollbar :wrapStyle="[{maxHeight:(bodyHeight - fixedHeightSmall)+'px'}]">
    <div class="PublicListStyle MkPayCenter">
      <div class='searchDiv marginBottom-20 textAlignRight'>
        <mk-permission :perms="['Ticket:FinanceManagement:SettlementCenter:create']">
          <el-button type="primary" size="" @click="dialogVisible_applyCash= true" class='btn-create btn_paycenter'>申请提现</el-button>
        </mk-permission>
      </div>
      <div class="content">
        <div class="info-box">
          <el-row :gutter='15'>
            <el-col :span="8">
              <div class="total-info">
                <div class="total-number">{{totalPay.totalPrice}}</div>
                <div class="total-name">累计交易金额（元）</div>
              </div>

            </el-col>
            <el-col :span="8" >
              <div class="total-info">
                <div class="total-number">{{totalPay.amountOfCash}}</div>
                <div class="total-name">累计提现金额（元）</div>
              </div>

            </el-col>
            <el-col :span="8">
              <div class="total-info">
                <div class="total-number">{{totalPay.availableAmount}}</div>
                <div class="total-name">可提现金额（元）</div>
              </div>
            </el-col>
          </el-row>
        </div>
        <div style="margin-top: 30px">
          <div class="tabContainer primary_bg trHasCursor"   v-loading="loadingTab"
               element-loading-text="拼命加载中">
            <el-table
              :data="treatedOrderData.elements"
              style="width: 100%"
              @row-click="showPayDetail">
              <el-table-column
                prop="serialNumber"
                label="流水号"
                width="160px">
              </el-table-column>
              <el-table-column
                prop="createTime"
                label="提现日期"
                :formatter="formatDate"
                width="220px">
              </el-table-column>
              <el-table-column
                width=''
                prop="price"
                label="提现金额（元）">
              </el-table-column>
              <el-table-column
                prop="commission"
                width=''
                label="交易分佣（元）">
              </el-table-column>
              <el-table-column
                prop="actualAmount"
                width=''
                label="实际打款（元）">
              </el-table-column>
              <el-table-column
                width=''
                prop="status"
                :formatter="formatStatus"
                label="打款状态">
                <!--<template slot-scope='scope'>{{scope.row.launcherName}} {{scope.row.launcherMobile}}</template>-->
              </el-table-column>
            </el-table>
            <el-pagination v-if='treatedOrderData.elements.length>0'
                           @current-change="handleCurrentChange"
                           :current-page="treatedOrderData.page"
                           :page-size="treatedOrderData.size"
                           layout="total, prev, pager, next"
                           :total="treatedOrderData.totalAmount">
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
    </el-scrollbar>
    <MkApplyCash :showDialog='dialogVisible_applyCash'  v-on:closeDialog='closeDialog_applyCash'></MkApplyCash>
    <MkPayDetail :showDialog='dialogVisible_payDetail' :payDetailId="payDetailId" v-on:closeDialog='closeDialog_payDetail'></MkPayDetail>
  </div>
</template>

<script>
  import MkBreadcrumb from './../../../components/MkBreadcrumb.vue'
  import MkApplyCash from  './MkApplyCash'
  import MkPayDetail from './MkPayDetail'
  import payService from './../../../services/charge'
  import MkPermission from "../../../components/MkPermission";
  import {mapState} from 'vuex'
  export default {
    name: 'MkPayCenter',
    components:{
      MkApplyCash,MkPayDetail, MkBreadcrumb,MkPermission
    },
    computed:mapState({
      bodyHeight:state => state.global.bodyHeight,
      fixedHeightSmall: state => state.global.fixedHeightSmall
    }),
    mounted: function() {
      this.loadInitData();
    },
    methods: {
      formatDate(row, column, cellValue){
        return new Date(cellValue).pattern("yyyy-MM-dd HH:mm")
      },
      formatStatus(row, column, cellValue){
        if (cellValue==='Pending_money'){
          return '待打款'
        } else {  //Already_made_money
          return '已打款'
        }
      },
      loadInitData(){
        payService.payCenterTotal(data=>{
          this.totalPay=data.data;
        })
        this.loadData();
      },
      closeDialog_applyCash(type) {
        this.dialogVisible_applyCash=false;
        setTimeout(()=>{
          this.loadInitData();
        },400)
      },
      handleCurrentChange(val) {//全部
        this.searchCondition['page.pn']=val;
        this.loadData();
      },
      closeDialog_payDetail(type) {
        this.dialogVisible_payDetail=false;
      },
      loadData() {
        this.loadingTab=true;
        payService.payCenterList(this.searchCondition,data=>{
          data.data.totalAmount = parseInt(data.data.totalAmount);
          this.treatedOrderData=data.data;
          this.loadingTab=false;
        })
      },
      showPayDetail(row, event, column){
        this.payDetailId=row.id;
        this.dialogVisible_payDetail=true;
      }
    },
    data () {
      return {
        payDetailId:'',
        loadingTab: false,
        screenHeight: document.body.clientHeight,
        beforeGetFocus: true,
        treatedOrderData: {
          elements: [           //number,date,total,commission,fact,status
          ],
          size: '',
          page: '',
          totalPages: '',
          totalAmount: '',
        },
//        currentPage: 1,
        breadcrumbData:{
          list: {
            first: {name:'财务管理',path: null, isClickAble: false},
            second: {name: '结算中心',path: null, isClickAble: false},
          },
          menuIconStyle : 'moneyIconStyle',
        },
        dialogVisible_applyCash:false,
        dialogVisible_payDetail:false,
        totalPay:'',
        currentPayId:'',
        searchCondition: {
          'page.pn':1,
          'page.size':10,
          fields:'serialNumber,price,commission,actualAmount,status,createTime,id',
        },
      }
    },
  }
</script>
<style lang="less">
  @import '../../../assets/style/main.less';
  .btn-create.btn_paycenter{
  }
  .MkPayCenter{
    /*.searchDiv{*/
      /*height: 50px;*/
    /*}*/
    .content{
      background: #fff;
     .info-box{
       padding:0 17.5px;
       .el-row{
         margin-left:0!important;
         margin-right:0!important;
         .el-col-8 {
           margin-top:30px;
           /*width: 32.5%;*/
           .total-info{
             background-color: #f9fafa;
             height:100%;
             padding-top:1px;
           }
           height: 150px;

           .total-number{
             margin: 40px 0 10px 50px;
             font-size: 28px;
           }
           .total-name{
             color: #81939e;
             font-size: 14px;
             margin-left: 50px;
           }
         }
       }
     }

    }

  }
</style>
